import React from 'react';
import { Form, Input, Button, Layout, App} from 'antd';
import { useNavigate } from 'react-router';
import styles from './Login.module.css';
import { login } from '../apis/user.js';

const { Header, Content } = Layout;

const Login = () => {
  const navigate = useNavigate(); // 用于 React Router 跳转
  const { message } = App.useApp();
  const onFinish = async (values) => {
    const { success } = await login(values);
    if (success) {
      message.success('登录成功');
      navigate('/home');
    }
  };

  return (
  <Layout className={styles.layout}>
    <Header className={styles.header}>
      <h1>欢迎使用todolist</h1>
    </Header>
    <Content className={styles.content}>
      <div className="login-container">
        <Form
          name="login-form"
          onFinish={onFinish}
          layout="vertical"
        >
          {/* 用户名或邮箱输入框 */}
          <Form.Item
            name="loginName"
            rules={[{ required: true, message: '请输入用户名或邮箱' }]} // 非空校验
          >
            <Input placeholder="请输入用户名或邮箱"/>
          </Form.Item>

          {/* 密码输入框 */}
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码' }]} // 非空校验
          >
            <Input.Password placeholder="请输入密码"/>
          </Form.Item>

          {/* 登录按钮 */}
          <Form.Item>
            <Button type="primary" htmlType="submit" block>
              登录
            </Button>
          </Form.Item>

          {/* 注册按钮 */}
          <Form.Item>
            <Button
              type="link"
              onClick={() => navigate('/register')} // 跳转到注册页面
              block
            >
              没有账号，注册
            </Button>
          </Form.Item>
        </Form>
      </div>
    </Content>
  </Layout>
  );
};

export default Login;
